<template>
  <div class="top">
    <div class="tips">
      <!-- <el-tag class="tip" type="info">内部编码(#pi)</el-tag>
      <el-tag class="tip" type="info">条形码(#pc)</el-tag>
      <el-tag class="tip" type="info">商品名称(#pn)</el-tag>
      <el-tag class="tip" type="info">单位(#pu)</el-tag>
      <el-tag class="tip" type="info">价格(#pp)</el-tag>
      <el-tag class="tip" type="info">会员价(#vp)</el-tag>
      <el-tag class="tip" type="info">原价(#pop)</el-tag>
      <el-tag class="tip" type="info">产地(#po)</el-tag>
      <el-tag class="tip" type="info">售货员(#pm)</el-tag>
      <el-tag class="tip" type="info">自定义1(#f1)</el-tag>
      <el-tag class="tip" type="info">自定义2(#f2)</el-tag>
      <el-tag class="tip" type="info">自定义3(#f3)</el-tag>
      <el-tag class="tip" type="info">二维码地址(#f4)</el-tag>
      <el-tag class="tip" type="info">型号图片地址(#f5)</el-tag>
      <el-tag class="tip" type="info">自定义6(#f6)</el-tag>
      <el-tag class="tip" type="info">库存(#kc)</el-tag>
      <el-tag class="tip" type="info">规格(#ps)</el-tag> -->
      <el-row>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('内部编码') }}(#pi)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('条形码') }}(#pc)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('商品名称') }}(#pn)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('单位') }}(#pu)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('价格') }}(#pp)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('会员价') }}(#vp)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('原价') }}(#pop)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('产地') }}(#po)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('售货员') }}(#pm)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('自定义1') }}(#f1)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('自定义2') }}(#f2)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('自定义3') }}(#f3)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('二维码地址') }}(#f4)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('型号图片地址') }}(#f5)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('自定义6') }}(#f6)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('库存') }}(#kc)</el-tag>
        </el-col>
        <el-col :span="2.8">
          <el-tag class="tip">{{ translate('规格') }}(#ps)</el-tag>
        </el-col>
      </el-row>
    </div>
    <div class="operation">
      <el-button @click="handle('clear')">{{ translate('清空') }}</el-button>
      <!-- <el-button @click="handle('createImg')">
        {{ translate('生成图片') }}
      </el-button> -->
      <el-button :loading="loading" type="primary" @click="handle('save')">
        {{ translate('保存') }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { translate } from '@/i18n'
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
  })
  const emit = defineEmits(['click'])
  const handle = (type: string) => {
    emit('click', type)
  }
</script>

<style lang="scss" scoped>
  .top {
    display: flex;
    align-items: center;

    .operation {
      // display: flex;
      // justify-content: flex-end;
      // height: 40px;
      align-items: center;
      min-width: 280px;

      .mr10 {
        margin-right: 10px;
      }
    }

    .tips {
      display: flex;
      flex-wrap: wrap;
      margin-left: 20px;

      .tip {
        font-size: 14px;
        margin: 10px 14px 0 0;
        // color: #808285;
      }
    }

    .el-row {
      margin-left: 300px;
    }
  }
</style>
